<template>
  <div class="wrapper">
    <div class="header">
      <div class="back-icon iconfont">&#xe624;</div>
      <div class="search">
        <span class="search-icon iconfont">&#xe615;</span>
        <input class="search-input" type="text" placeholder="输入城市/景点/游玩主题">
      </div>
      <router-link to="/city" tag="div" class="select-city">
        {{ this.$store.state.city }}
        <span class="iconfont">&#xe616;</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
   input::-webkit-input-placeholder {
      color #e4e7ea
      font-size .3rem
   }
  .wrapper
    position fixed
    top 0
    left 0
    right 0
    z-index 2
    .header
      display flex
      position relative
      height .86rem
      line-height .86rem
      background #00bcd4
      color #fff
      .back-icon
        width .8rem
        float left
        text-align center
      .search
        flex 1
        position relative
        .search-icon
          position absolute
          color #e4e7ea
          left .2rem
          top .15rem
          height .56rem
          line-height .56rem
        .search-input
          width 100%
          height .56rem
          padding-left .7rem
          border-radius .1rem
          color #e4e7ea
      .select-city
        padding 0 .2rem
        float right
        text-align center
</style>
